<template>
    <div class="wrapper">
        <div class="status-bar" :style="{'height': statusHeight}"></div>
        <div class="header">
            <div class="scan" >
                <text class="txt">test</text>
            </div>
            <div class="notice">
                <text class="txt"></text>
            </div>
        </div>
        <scroller :show-scrollbar="false" class="home_content">
            <slider class="slider" interval="3000" auto-play="true">
                <div v-for="img in bannerList" v-if="img.pic">
                    <image class="content_first_img" resize="contain" :src="img.pic"></image>
                </div>
            </slider>
            <div class="content_middle">
                <div class="content_middle_div" >
                    <text class="content_middle_text">卖车</text>
                </div>
                <div class="content_middle_div">
                    <text class="content_middle_text">评估</text>
                </div>
                <div class="content_middle_div" >
                    <text class="content_middle_text">分期购</text>
                </div>
            </div>
            <text class="home_huodong">活动专区</text>
            <slider class="scroller">
                <div class="list_cell" v-for="item in activeList">
                   <div class="list_content" >
                       <image class="list_content_img" v-if="item.headImg" :src="item.headImg"></image>
                       <image class="list_content_img" v-else src="bmlocal://assets/acw/car.jpg"></image>
                       <div>
                           <text class="list_content_first">{{item.pName}}</text>
                           <div class="list_content_two">
                               <text class="list_content_two1">{{item.pYear}}年</text>
                               <text class="list_content_two2">{{item.pKilometre}}公里</text>
                               <text class="list_content_two1">{{item.p1}}</text>
                           </div>
                           <div class="list_content_third">
                               <text class="list_content_third_price">{{item.pPrice}}万</text>
                               <WxcButton  type="white" size="medium" text="砍价"></WxcButton>
                           </div>
                       </div>
                   </div>
                   <div class="active_area" v-if="item.bargainList.length != 0">
                       <text class="active_area_title">砍价排行榜</text>
                       <div v-for="bargain in item.bargainList">
                           <div class="bargain_rink" v-if="userId == bargain.uid">
                               <image class="bargain_rink_face" src="bmlocal://assets/acw/face1.png"></image>
                               <text class="bargain_rink_name">自己</text>
                                <div>
                                   <div class="bargain_num">
                                       <text class="bargain_num1">已砍价￥{{parseFloat(bargain.bargainPrice * 10000).toFixed(2)}}</text>
                                       <text class="bargain_num2">{{bargain.bargainCount}}人砍价</text>
                                   </div>
                                   <wxc-progress class="progress" :value="(bargain.bargainPrice/(bargain.carPrice + bargain.bargainPrice))*100"
                                        bar-color='#ff2d2d'
                                        :bar-height=16
                                        :bar-radius=16
                                        :bar-width=440></wxc-progress>
                               </div>
                                <text class="bargain_rink_buy" v-if="bargain.bargainPrice >= 1" >购买</text>
                           </div>
                           <div v-else class="bargain_rink">
                               <image class="bargain_rink_face" src="bmlocal://assets/acw/face1.png"></image>
                               <text class="bargain_rink_name" v-if="bargain.uname">{{bargain.uname}}</text>
                               <text class="bargain_rink_name" v-else>匿名</text>
                               <div>
                                   <div class="bargain_num">
                                       <text class="bargain_num1">已砍价￥{{parseFloat(bargain.bargainPrice * 10000).toFixed(2)}}</text>
                                       <text class="bargain_num2">{{bargain.bargainCount}}人砍价</text>
                                   </div>
                                   <wxc-progress class="progress" :value="(bargain.bargainPrice/(bargain.carPrice + bargain.bargainPrice))*100"
                                        bar-color='#ff2d2d'
                                        :bar-height=16
                                        :bar-radius=16
                                        :bar-width=440></wxc-progress>
                               </div>
                           </div>
                       </div>
                   </div>
                </div>
            </slider >
            <div class="home_car_market">
                <text class="car_market_text" >个人车源</text>
                <text class="car_market_text" >优质商家</text>
            </div>
            <!-- <wxc-tab-page ref="wxc-tab-page"
                :tab-titles="tabTitles"
                :tab-styles="tabStyles"
                title-type="text"
                :needSlider="needSlider"
                :is-tab-view="isTabView"
                :tab-page-height="tabPageHeight"
                :spm-c="4307989">
                <list v-for="(v,index) in tabList"
                    :key="index"
                    class="item-container"
                    offset-accuracy="50px"
                    :style="{ height: (tabPageHeight - tabStyles.height - statusHeight) + 'px' }">
                <cell class="border-cell"></cell>
                <cell v-for="(demo,key) in v"
                        class="cell"
                        :key="key"
                        :accessible="true"
                        aria-label="卡片标签">
                    <wxc-pan-item url="">
                        <div class="content" >
                            <image class="content_img" v-if="demo.headImg" :src="demo.headImg"></image>
                            <image class="content_img" v-else src="bmlocal://assets/acw/car.jpg"></image>
                            <div>
                                <text class="content_first">{{demo.pAllname}}</text>
                                <div class="content_two">
                                    <text class="content_two1">{{demo.pYear}}</text>
                                    <text class="content_two2">{{demo.pKilometre}}</text>
                                    <text class="content_two1">{{demo.p1}}</text>
                                </div>
                                <div class="content_third">
                                    <text class="content_third_price">{{demo.pPrice}}</text>
                                </div>
                                <div class="content_four">
                                    <text class="content_four_text">2万公里质保</text>
                                    <text class="content_four_text">3天无理由</text>
                                    <text class="content_four_text" >{{demo.selltype == 0? '联系商家': '联系车主'}}</text>
                                </div>
                            </div>
                        </div>
                    </wxc-pan-item>
                </cell>
                <cell class="cell fullC" v-if="tabList[index].length <= 0" v-cloak>
                    
                </cell>
                <loading class="loading"  :display="showLoading">
                    <text class="indicator">加载中...</text>
                </loading>
                </list>
            </wxc-tab-page> -->
            <div class="home_bottom">
                <div class="home_bottom_child">
                    <text class="bottom_child_text">首页</text>
                </div>
                <div class="home_bottom_child">
                    <text class="bottom_child_text">服务</text>
                </div>
                <div class="home_bottom_child">
                    <text class="bottom_child_text">车友</text>
                </div>
                <div class="home_bottom_child">
                    <text class="bottom_child_text">我的</text>
                </div>
            </div>
        </scroller>
        <div class="side_pop" ref="side" >
            <list class="left_list">
                <cell class="cellBrand" v-for="(item, index) in brandList" :ref="item.brandEn + index">
                    <div class="list_cont">
                        <text class="list_cont_text">{{item.brandEn}}  </text>
                        <image :src="item.brandPic" v-if="item.brandEn" class="list_cont_img"></image>
                        <text class="list_cont_text">  {{item.name}}</text>
                    </div>
                </cell>
            </list>
        </div>
        <wxc-popup width="750"
            height="400"
            :show="isBottomShow"
            pos="bottom">
            <list>
                <cell class="cellBrand" v-for="item in dateList">
                    <text class="list_date_text">{{item}}</text>
                </cell>
            </list>
        </wxc-popup>
        <wxc-popup width="750"
            height="400"
            :show="searchShow"
            pos="bottom">
            <list>
                <cell class="cellBrand" v-for="item in priceList" >
                    <text class="list_date_text">{{item.label}}</text>
                </cell>
            </list>
        </wxc-popup>
        <div class="order_pop" v-if="payPopShow">
            <text class="order_pop_title">订单信息</text>
            <div class="order_pop_content">
                <text class="order_pop_text1">订单编号：</text>
                <text class="order_pop_text2">{{order.orderId}}</text>
            </div>
            <div class="order_pop_content">
                <text class="order_pop_text1">车主：</text>
                <text class="order_pop_text2">{{order.name}}</text>
            </div>
            <div class="order_pop_content">
                <text class="order_pop_text1">价格：</text>
                <text class="order_pop_text2">{{order.price}}万元</text>
            </div>
            <div class="order_pop_content">
                <text class="order_pop_text1">优惠：</text>
                <text class="order_pop_text2">{{order.offer}}万元</text>
            </div>
            <div class="order_pop_content">
                <text class="order_pop_text1">实际支付：</text>
                <text class="order_pop_text2">{{order.realPay}}万元</text>
            </div>
            <div class="order_pop_content">
                <text class="order_pop_text1">看车地点：</text>
                <text class="order_pop_text2">{{order.address}}</text>
            </div>
            <div class="order_pop_button">
                <text class="order_pop_cencel" >取消</text>
                <text class="order_pop_pay">支付</text>
            </div>
        </div>
    </div>
</template>
<script>
import { WxcButton, WxcProgress, WxcTabPage, WxcPanItem, Utils, WxcPopup } from 'weex-ui';
import util from './utils/util';
import buycarCon from './config'
// const dom = weex.requireModule('dom')
// var bmWXPay = weex.requireModule('bmWXPay')
// bmWXPay.initWX('wxb41ad58cf1f362f9')
// const animation = weex.requireModule('animation')
export default {
    components: { WxcButton, WxcProgress, WxcTabPage, WxcPanItem, WxcPopup },
    data () {
        return {
            token: '',
            statusHeight: Number.parseInt(this.statusBarHeight || weex.config.env.statusBarHeight || 40),
            tabTitles: buycarCon.tabTitles,
            tabStyles: buycarCon.tabStyles,
            tabList: [[],[],[],[]],
            tabPageHeight: 1334,
            isTabView: true,
            needSlider: true,
            activeList: [],
            userId: '',
            searchParam: {
                p_brand: '',
                sellType: '',
                p_year: '',
                price: '',
                p_color: '',
                age: '',
                gas: '',
                p_model: '',
                name: '',
                isrecom: 0, // 推荐豪车 是1 否 0
                page: 1,
                limit: 10,
                sort: 'p_id',
                order: 'asc',
            },
            bannerList: [],
            brandList: [],
            brandIndex: buycarCon.ABC,
            selectBrand: '',
            showLoading: false,
            isBottomShow: false,
            dateList: [],
            searchShow: false,
            priceList: [],
            payPopShow: false,
            order: {
                orderId: '',
                name: '',
                price: '',
                offer: '',
                realPay: '',
                address: '',
            },
        }
    },
    created () {
        // this.getBannerList()
    },
    methods: {
        getBannerList () {
            console.log("------------------------------")
            this.$fetch({
                method: 'POST',    // 大写
                name: 'banner.list', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                data: {
                    "page": 1,
                    "limit": 5,
                    "sort": 'add_time',
                    "order": 'desc'
                }
            }).then(resData => {
                // 成功回调
                console.log('------------查询轮播图-------------------------', resData)
                // this.$notice.toast({ message: resData})
                this.isShowLoad = false;
                if(resData && resData.errno == 0){
                    this.bannerList = resData.data.items
                }
            }, error => {
                // 错误回调
                this.isShowLoad = false;
                console.log(error)
            })
        },
    }
}
</script>
<style>
/* .iconfont {
    font-family: iconfont;
}
.iconfontStyle {
    font-size: 80px;
    color: #1E90FF;
}
.iconfontThisMenu {
    font-size: 60px;
    color: #1E90FF;
}
.iconfontMenu {
    font-size: 60px;
    color: #bfbfbf;
}

.wrapper{
    background-color: #fff;
}
.status-bar{
    width: 750px;
    height: 40px;
    background-color: #fff;
}
.header{
    display: flex;
    flex-direction: row;
    background-color: #fff;
    height: 88px;
    align-items: center;
    justify-content: space-around;
}
.header_right{
    flex-direction: row;
    align-items: center;
}
.headerTextSize{
    font-size: 35px;
    color: #666;
    margin-left: 5px;
}
.headerIcon{
    font-size: 40px;
    color: #666;
    margin-left: 24px;
    margin-right: 15px;
}
.header_search{
    width: 400px;
    height: 70px;
    padding-left: 20px;
    border-style: solid;
    border-width: 1px;
    border-radius: 5px;
    border-color: #666;
}

.scan,
.notice {
    width: 96px;
}

.ic,
.txt,
.search {
    text-align: center;
    color: #666;
    font-weight: 300;
}
.search {
    flex: 1;
    height: 60px;
    font-size: 26px;
    padding-top: 13px;
    background-color: #ededed;
    border-radius: 8px;
}

.ic {
    font-size: 32px;
}

.home_content{
    height: 2334px;
    width: 750px;
}
.slider{
    height: 400px;
    background-color: #fff;
}
.content_first_img{
    height: 400px;
}
.content_middle{
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    background-color: #fff;
    height: 160px;
}
.content_middle_div{
    align-items: center;
}
.content_middle_img{
    height: 50px;
    width: 60px;
}
.content_middle_text{
    font-size: 36px;
    color: #666;
}
.home_huodong{
    text-align: center;
    background-color: #1E90FF;
    color: #fff;
    font-size: 36px;
    height: 100px;
    line-height: 100px;
}
.scroller{
    flex-direction: row;
}
.list_cell{
    align-items: center;
    background-color: #fff;
}
.list_content{
    flex-direction: row;
    margin-top: 30px;
    margin-bottom: 30px;
    margin-left: 20px;
    margin-right: 20px;
}
.list_content_first{
    width: 500px;
    color: #666;
    font-size: 30px;
    margin-bottom: 10px;
}
.list_content_img{
    height: 240px;
    width: 200px;
    margin-right: 10px;
}
.list_content_two{
    flex-direction: row;
    margin-top: 20px;
    margin-bottom: 20px;
}
.list_content_third{
    flex-direction: row;
}
.list_content_two1{
    color: #666;
    font-size: 30px;
    padding-left: 20px;
    padding-right: 20px;
}
.list_content_two2{
    color: #666;
    font-size: 30px;
    padding-left: 20px;
    padding-right: 20px;
    border-left-style: solid;
    border-left-width: 2px;
    border-left-color: #666;
    border-right-style: solid;
    border-right-width: 2px;
    border-right-color: #666;
}
.list_content_third_price{
    font-size: 40px;
    color: #ff2d2d;
    margin-left: 20px;
    margin-right: 40px;
}
.active_area{
    padding: 5px;
}
.bargain_rink{
    flex-direction: row;
    align-items: center;
    margin-top: 10px;
}
.bargain_rink_face{
    width: 40px;
    height: 40px;
    margin-right: 10px;
}
.bargain_rink_name{
    margin-right: 10px;
    width: 80px;
}
.bargain_num{
    flex-direction: row;
}
.bargain_num1{
    color: #666;
    margin-right: 60px;
    margin-bottom: 3px;
}
.bargain_num2{
    color: #666;
    margin-bottom: 3px;
}
.progress{
    border-style: solid;
    border-width: 1px;
    border-color: #ff2d2d;
}
.bargain_rink_buy{
    background-color: #1E90FF;
    color: #fff;
    width: 80px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    border-radius: 10px;
    margin-left: 10px;
}
.active_area_title{
    color: #666;
    width: 710px;
    text-align: center;
    height: 80px;
    line-height: 80px;
    border-radius: 10px;
    border-width: 1px;
    border-style: dashed;
}
.no_bargain_list{
    margin-top: 20px;
    width: 710px;
    text-align: center;
    color: #666;
}
.home_car_market{
    flex-direction: row;
    margin-top: 10px;
    justify-content: space-around;
    margin-bottom: 10px;
}
.car_market_text{
    color: #fff;
    background-color: #1E90FF;
    width: 365px;
    height: 100px;
    line-height: 100px;
    text-align: center;
}
.home_bottom{
    flex-direction: row;
    position: fixed;
    bottom: 0px;
    background-color: #fff;
    width: 750px;
    height: 100px;
    justify-content: space-around;
}
.home_bottom_child{
    justify-content: center;
}
.bottom_child_img{
    width: 50px;
    height: 50px;
}

.border-cell {
    background-color: #f2f3f4;
    width: 750px;
    height: 24px;
    align-items: center;
    justify-content: center;
    border-bottom-width: 1px;
    border-style: solid;
    border-color: #e0e0e0;
}
.cell{
    background-color: #fff;
}
.content{
    flex-direction: row;
    height: 300px;
    border-bottom-width:1px;
    border-color: #e0e0e0;
    align-items: center;
    justify-content: center;
}
.content_first{
    width: 500px;
    color: #666;
    font-size: 30px;
    margin-bottom: 10px;
}
.content_img{
    height: 240px;
    width: 200px;
    margin-right: 10px;
}
.content_two{
    flex-direction: row;
    margin-top: 20px;
    margin-bottom: 20px;
}
.content_third{
    flex-direction: row;
}
.content_two1{
    color: #666;
    font-size: 30px;
    padding-left: 20px;
    padding-right: 20px;
}
.content_two2{
    color: #666;
    font-size: 30px;
    padding-left: 20px;
    padding-right: 20px;
    border-left-style: solid;
    border-left-width: 2px;
    border-left-color: #666;
    border-right-style: solid;
    border-right-width: 2px;
    border-right-color: #666;
}
.content_third_price{
    font-size: 30px;
    color: #ff2d2d;
    margin-left: 20px;
    margin-right: 40px;
}
.content_four{
    width: 520px;
    flex-direction: row;
    justify-content: space-around;
    padding-top: 10px;
}
.content_four_text{
    font-size: 30px;
    color: #009100;
    border-style: solid;
    border-width: 1px;
    border-color: #009100;
    border-radius: 5px;
    height: 40px;
    line-height: 40px;
    padding-left: 10px;
    padding-right: 10px;
}
.item-container {
    width: 750px;
    background-color: #f2f3f4;
}
.cellBrand{
    width: 750px;
    border-bottom-color: #eee;
    border-bottom-style: solid;
    border-bottom-width: 1px;
}

.list_cont{
    height: 100px;
    margin-left: 20px;
    flex-direction: row;
    align-items: center;
}


.left_list_index{
    position: absolute;
    height: 1000px;
    top: 100px;
    right: 20px;
    border-style: solid;
    border-width: 1px;
    border-color: #aaa;
    border-radius: 5px;
}
.cellBrand_index{
    width: 40px;
    border-bottom-color: #eee;
    border-bottom-style: solid;
    border-bottom-width: 1px;
}
.list_cont_index{
    height: 50px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.list_cont_label{
    color: #333;
    font-size: 20px;
    
    text-align: center;
}
.list_cont_img{
    width: 50px;
    height: 50px;
    margin-right: 20px;
}
.list_cont_text{
    color: #333;
    font-size: 30px;
}
.list_date_text{
    color: #333;
    font-size: 30px;
    height: 60px;
    line-height: 60px;
    text-align: center;
}
.order_pop{
    position: fixed;
    background-color: #fff;
    height: 800px;
    width: 550px;
    top: 200px;
    left: 100px;
}
.order_pop_title{
    height: 100px;
    line-height: 100px;
    font-size: 40px;
    text-align: center;
}
.order_pop_content{
    flex-direction: row;
    height: 80px;
    align-items: center;
}
.order_pop_text1{
    color: #666;
    font-size: 36px;
    width: 300px;
    text-align: right;
}
.order_pop_text2{
    color: #666;
    font-size: 36px;
}
.order_pop_button{
    flex-direction: row;
    height: 130px;
    justify-content: space-around;
    align-items: flex-end;
}
.order_pop_cencel{
    font-size: 40px;
    border-style: solid;
    border-width: 1px;
    border-color: #666;
    border-radius: 8px;
    width: 140px;
    height: 60px;
    line-height: 60px;
    text-align: center;
}
.order_pop_pay{
    font-size: 40px;
    background-color: #1E90FF;
    color: #fff;
    border-radius: 8px;
    width: 140px;
    height: 60px;
    line-height: 60px;
    text-align: center;
}
.side_pop{
    position: absolute;
    top: 138px;
    background-color: #fff;
    width: 750px;
    height: 1334px;
    left: -750px;
} */
</style>
